<template>
	<div>
		<el-tree 
		ref="wytree"
		:data="tableData" 
		:props="props" 
		:default-checked-keys="keys"
		node-key="id" 
		show-checkbox 
		default-expand-all></el-tree>
		<el-button style="margin-top: 10px;" type="primary" plain @click="save">保存</el-button>
	</div>
</template>

<script setup>
	import { get,post } from '@/plugins/axios'
	import { ref,reactive } from 'vue'
	const prop = defineProps(['roleId'])
	const emits = defineEmits(['update:show'])
	const tableData =  ref([])
	const wytree = ref()
	const props = reactive({
		label: 'name'
	})
	const keys = ref([])
	function getTableData(){
		get('/roleRes/getRes',{ roleId:prop.roleId },content => {
			tableData.value = content.resList
			for(const i in content.roleResList){
				if(content.roleResList[i].type === 1){
					keys.value.push(content.roleResList[i].resId)
				}
			}
			console.dir(content)
		})
	}
	function save(){
		const checkNodes = wytree.value.getCheckedNodes(false, true)
		const menuIds = []
		const btnIds = []
		for(const i in checkNodes) {
			if(checkNodes[i].type === 1){
				menuIds.push(checkNodes[i].id)
			}else{
				btnIds.push(checkNodes[i].id)
			}
		}  
		post('/roleRes/save',{ roleId: prop.roleId,menuIds,btnIds },content => {
			emits('update:show',false)
		})
	}
	getTableData()
</script>

<style>
</style>